<template>
	<view>
		<view class="main">
			<view class="actBox"  v-for="(item,index) in mianClass" :key="index" @click="goclass(item.cat.id)">
				<image class="img" mode="heightFix" :src="item.icon"></image>
				<view class="name ">{{item.name}}</view>
			</view>
		</view>
		
		<!-- <view class="titleBox">热门服务</view> -->
		<view class="allClass">
			<view class="classBox" @click="toClass" :data-id="item.id" :data-cateid="item.catId"  :key="index" v-for="(item,index) in classList">
				<image class="img" :src="item.icon"></image>
				<view class="name">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {reactive,ref,getCurrentInstance,onMounted} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	import {storeToRefs} from "pinia";//结构才需要引入
	import {useNavStore} from '@/store/index.js'//引入空间
	const navStore = useNavStore()//给空间命名
	const {proxy} = getCurrentInstance()
	const emits = defineEmits(["isactivefun"])
	const isactivefun = () => {
			emits("isactivefun",1)
			
			
	} 
	const mianClass = ref([])
	const classList = ref([])
	onMounted(async()=>{
		await Promise.all([getClass(), getMain()])
	})
	const getMain=async()=> {
		console.log(111);
		const res = await proxy.$api.getMainClass()
		console.log('mianClass',res);
		mianClass.value = res.data
	}
	const getClass=async()=> {
		console.log(111);
		const res = await proxy.$api.services()
		console.log('classList',res);
		classList.value = res.data
	}
	//首页大导航分类
	const goclass=(e)=>{
		navStore.$patch({ categoryid: navStore.categoryid = e })
		console.log('navStore.categoryid.value',navStore.categoryid);
		isactivefun()
		
	}
	//热门服务跳转
	const toClass=(e)=>{
		var cateid = e.currentTarget.dataset.cateid
		var id = e.currentTarget.dataset.id
		if(cateid!=null){
			navStore.$patch({ categoryid: navStore.categoryid = cateid })
			console.log('navStore.categoryid.value',navStore.categoryid);
			isactivefun()
		}else{
			uni.navigateTo({
				url: '/pages-detail/shop-detail/shop-detail?id=' + id
			})
		}
		
	}
	
</script>

<style lang="less">
.main {
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		align-items: center;
		padding: 20px;
		

		.actBox {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.img {
				width: 40px;
				height: 40px;
			}

			.name {
				text-align: center;
				margin-top: 5px;
				font-size: 14px;
			}
		}
	}
		.allClass {
			display: flex;
			flex-wrap: wrap;
			// padding-top: 10px ;
			padding: 20rpx 40rpx;
		
			.classBox {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: calc(100%/5);
				margin-bottom: 20rpx;
		
				.img {
					width: 80rpx;
					height: 80rpx;
				}
		
				.name {
					margin-top: 10rpx;
					font-size: 28rpx;
					height: 76rpx;
					text-align: center;
				}
			}
		}
</style>
